<template>
    <div>
      <h2>主页面内容</h2>
      <button @click="toggleDrawer">打开右侧抽屉</button>
  
      <CustomDrawer
        v-model="isDrawerOpen"
        :initial-width="600"
        :min-width="500"
        :max-width="undefined"
        :mask-closable="true"
        @resize="(width) => console.log('当前宽度:', width)"
        @halfScreenWidth="onHalfScreenWidth"
        @lessThanHalfScreenWidth="onLessThanHalfScreenWidth"
      >
        <p>这是自定义抽屉的内容区域。</p>
        <p>你可以在这里放任意内容，比如表单、表格、树形结构等。</p>
        <Markdown />
      </CustomDrawer>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import CustomDrawer from './CustomDrawer.vue'
  import Markdown from '../Markdown.vue'
  
  const isDrawerOpen = ref(false)
  const toggleDrawer = () => {
    isDrawerOpen.value = !isDrawerOpen.value
  }
  
  const onHalfScreenWidth = () => {
    console.log('✅ 抽屉宽度 >= 50% 屏幕宽度')
  }
  
  const onLessThanHalfScreenWidth = () => {
    console.log('❌ 抽屉宽度 < 50% 屏幕宽度')
  }
  </script>